<!DOCTYPE html>
<html>
<head lang="zn-cn">
    <link href="$!{__beat.server.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/App.css" type="text/css" />
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/jquery-easyui-1.4.4/themes/default/easyui.css" type="text/css" />
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/jquery-easyui-1.4.4/themes/icon.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="$!{__beat.server.contextPath}/css/wnl.css">
    <script src="$!{__beat.server.contextPath}/jquery-easyui-1.4.4/jquery.min.js"></script>
    <script src="$!{__beat.server.contextPath}/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
   
    
    <style type="text/css">    
            .table tbody>tr>td {
            word-break: break-all;
            word-wrap: break-word;         
            vertical-align: middle;         
            }
            .btn-default
			{
			   background-color: #78B9E5;
			   color:white;
			}
			.more{  
				    display: inline-block;
				    position: absolute;
				    width: 0;
				    height: 0;
				    margin-top: 5px;
				    margin-left: 30px;
				    vertical-align: middle;
				    border-left: 4px dashed;
				    border-left: 4px solid\9;
				    border-top: 4px solid transparent;
				    border-bottom: 4px solid transparent;
			}
        </style>
<meta charset="UTF-8">
<title>城市排行榜</title>
</head>
<body>
  

   <div class="container-fluid">
   <form id="city_form" action="$!{__beat.server.contextPath}/zhishu/zhaopin/city" name="city_form" method="post">
	    <div class="dataShow" style="margin-top: 30px;height:172px;">	
		      <div class="row">
		               <div class=" form-group col-md-offset-4" style="margin-top: 30px;">
			                <label class="col-md-2 "for="positionName" style="padding-left:10px;margin-left: 10px;">职位：</label>
			                <input type="hidden" id="position_select" value="$!position"/>
			                <div class="col-md-2" style="margin-left:-60px">
				                <select  id="position" name="position" class="easyui-combobox combobox-f combo-f textbox-f form-control" style="width: 150px;height: 25px; display: none;" textboxname="city" comboname="city" >
				                     <option checked>建筑</option>
				                     
				                </select>
			                </div>
		                </div>
		      </div>										    
		          <div class="row">
		           <div class=" form-group col-md-offset-2" style="margin-top: 50px;">
		                       
						<div class="col-md-3" >
							   <div class="col-lg-6">
							    <div class="input-group">
							      <!-- <span class="input-group-addon">
							        <input type="checkbox" id="year_checkbox" name="year_checkbox" aria-label="...">
							      </span> -->
							      <input type="hidden" id="begin_date" value="$!date.begin_date.get(0)-$!date.begin_date.get(1)">
							      <input type="hidden" id="end_date" value="$!date.end_date.get(0)-$!date.end_date.get(1)">
							      <button type="button"  id="month" name="month" class="btn btn-info dropdown-toggle form-control" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="font-size: 15px;width:160px;border-radius: 4px;">$!date.end_date.get(0)年$!date.end_date.get(1)月</button>						 
								  <ul id="month_ul" class="dropdown-menu" style="display:none;text-align: center;">
										#foreach($li in [$date.end_date.get(0)..$date.begin_date.get(0)])																				
											   #set($last = ($date.end_date.get(0)-$date.begin_date.get(0))+1)
											   #if($velocityCount==1)<li id="month_last"><a href="#">$li年<span class="more"></span></a></li> 
											   #elseif($velocityCount==$last)<li id="month_first"><a href="#">$li年<span class="more"></span></a></li>
											   #else<li ><a href="#">$li年<span class="more"></span></a></li>
											   #end
									    #end
								 </ul>
								 <ul id="month_ul_more" class="dropdown-menu" style="display:none;text-align: center;position: absolute;margin-left: 160px;margin-top: 0px;">
										<li><a href="#">1月 </a></li>
										<li><a href="#">2月 </a></li>
										<li><a href="#">3月 </a></li>
										<li><a href="#">4月 </a></li>
										<li><a href="#">5月 </a></li>
										<li><a href="#">6月 </a></li>
										<li><a href="#">7月 </a></li>
										<li><a href="#">8月 </a></li>
										<li><a href="#">9月 </a></li>
										<li><a href="#">10月 </a></li>
										<li><a href="#">11月 </a></li>
										<li><a href="#">12月 </a></li>		
								 </ul>
							    </div><!-- /input-group -->
							  </div><!-- /.col-lg-6 -->
						  </div>
		
		                <div class="col-md-3">
							   <div class="col-lg-6">
							    <div class="input-group">							     
							      <input type="hidden" value="季 度">
							      <button type="button" id="season" name="season" class="btn btn-default  dropdown-toggle form-control" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="font-size: 15px;width:160px;border-radius: 4px;" >季度榜单</button>						 
												  <ul id="season_ul" class="dropdown-menu" style="display:none;text-align: center;">
                                                        #foreach($li in [$date.end_date.get(0)..$date.begin_date.get(0)])																				
															   #set($last = ($date.end_date.get(0)-$date.begin_date.get(0))+1)
															   #if($velocityCount==1)<li id="season_last"><a href="#">$li年<span class="more"></span></a></li> 
															   #elseif($velocityCount==$last)<li id="season_first"><a href="#">$li年<span class="more"></span></a></li>
															   #else<li ><a href="#">$li年<span class="more"></span></a></li>
															   #end
													    #end
												  </ul>
												  <ul id="season_ul_more" class="dropdown-menu" style="display:none;text-align: center;position: absolute;margin-left: 160px;">
														<li style="display:none;"><a href="#">第一季度 </a></li>
														<li style="display:none;"><a href="#">第二季度 </a></li>
														<li style="display:none;"><a href="#">第三季度 </a></li>
														<li style="display:none;"><a href="#">第四季度 </a></li>
																
												 </ul>
							    </div><!-- /input-group -->
							  </div><!-- /.col-lg-6 -->
						  </div>
		                <div class="col-md-3">
							   <div class="col-lg-6">
							    <div class="input-group">
							      <input type="hidden" value="月 份">
							      <button type="button"  id="year" name="year" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="font-size: 15px;width:160px;border-radius: 4px;" >
												    年度榜单
												  </button>						 
												  <ul id="year_ul" class="dropdown-menu" style="display:none;text-align: center;">
												    #foreach($li in [$date.end_date.get(0)..$date.begin_date.get(0)])																				
										         	   <li><a class="dropdown" href="#">$li年 </a></li>
									                #end
												  </ul>
							    </div><!-- /input-group -->
							  </div><!-- /.col-lg-6 -->
						  </div>
		                <button type="button" id="searchBtn" name ="searchBtn" onclick="doSubmit()" class="btn btn-primary btn-xs" style="margin-left:60px;margin-top: 5px;">查 询</button>
		           </div>
		      </div>
	      </div>
      
      </form>

      <div id="row1" class="dataShow" style="overflow:auto; margin-top: 30px;">
           
           <div class="col-md-4">
	          <h4 id="salary" class="heading" style="text-align:center">薪水最高的城市</h4>
	           <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper" role="grid">
	                  <div class="row dt-rt">
	                  <div class="col-sm-6">
	                  </div>
	                  <div class="col-sm-6">
	                  </div>
	           </div>
	           <table style="cursor:pointer;text-align:center" class="table table-striped table-bordered table-hover  dataTable-helper dataTable" data-provide="datatable" id="DataTables_Table_0" >
                    <thead>
                        <th style="text-align:center">排 名</th>
                        <th style="text-align:center">城市名称</th>
                        <th style="text-align:center">平均月薪（元）</th>
                    </thead>
                                    
                    <tbody id="salaryTable" role="alert" aria-live="polite" aria-relevant="all">
                    </tbody>
                    </table>
                    <div class="row dt-rb">
                    <div class="col-sm-6">
                    </div>
                    <div class="col-sm-6">
                    </div></div></div>
	         
	      </div>
	      <div class="col-md-4">
	      <h4 id="salary" class="heading" style="text-align:center">职位需求最多的城市</h4>
	           <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper" role="grid">
	                  <div class="row dt-rt">
	                  <div class="col-sm-6">
	                  </div>
	                  <div class="col-sm-6">
	                  </div>
	           </div>
	           <table style="cursor:pointer;text-align:center" class="table table-striped table-bordered table-hover  dataTable-helper dataTable" data-provide="datatable" id="DataTables_Table_0" >
                    <thead>
                        <th style="text-align:center">排 名</th>
                        <th style="text-align:center">城市名称</th>
                        <th style="text-align:center">日均发帖数</th>
                    </thead>
                                    
                    <tbody id="salaryTable" role="alert" aria-live="polite" aria-relevant="all">                                                           
                        
                    </tbody>
                    </table>
                    <div class="row dt-rb">
                    <div class="col-sm-6">
                    </div>
                    <div class="col-sm-6">
                    </div></div></div>
	         
	      </div>
	      
	      <div class="col-md-4">
	          <h4 id="salary" class="heading" style="text-align:center">最受求职者青睐的城市</h4>
	           <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper" role="grid">
	                  <div class="row dt-rt">
	                  <div class="col-sm-6">
	                  </div>
	                  <div class="col-sm-6">
	                  </div>
	           </div>
	           <table style="cursor:pointer;text-align:center" class="table table-striped table-bordered table-hover  dataTable-helper dataTable" data-provide="datatable" id="DataTables_Table_0" >
                    <thead>
                        <th style="text-align:center">排 名</th>
                        <th style="text-align:center">城市名称</th>
                        <th style="text-align:center">日均投递简历数</th>
                    </thead>
                                    
                    <tbody id="salaryTable" role="alert" aria-live="polite" aria-relevant="all">                                                           
                        
                    </tbody>
                    </table>
                    <div class="row dt-rb">
                    <div class="col-sm-6">
                    </div>
                    <div class="col-sm-6">
                    </div></div></div>
	         
	      </div>
      </div>
      
      <div id="row2" class="dataShow" style="overflow:auto;margin-top: 20px; ">
          
	      <div class="col-md-4">
	          <h4 id="salary" class="heading" style="text-align:center">用工缺口最大的主要城市</h4>
	           <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper" role="grid">
	                  <div class="row dt-rt">
	                  <div class="col-sm-6">
	                  </div>
	                  <div class="col-sm-6">
	                  </div>
	           </div>
	           <table style="height:614px;cursor:pointer;text-align:center" class="table table-striped table-bordered table-hover  dataTable-helper dataTable" data-provide="datatable" id="DataTables_Table_0" >
                    <thead>
                        <th style="text-align:center;height:51px;">排 名</th>
                        <th style="text-align:center;height:51px;">城市名称</th>
                        <th style="text-align:center;height:51px;">用工缺口</th>
                    </thead>
                                    
                    <tbody id="salaryTable" role="alert" aria-live="polite" aria-relevant="all">                                                                                 
                    </tbody>
                    </table>
                    <div class="row dt-rb">
                    <div class="col-sm-6">
                    </div>
                    <div class="col-sm-6">
                    </div></div></div>
	         
	      </div>
	      <div class="col-md-4">
	          <h4 id="salary" class="heading" style="text-align:center">薪资增长最多的主要城市</h4>
	           <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper" role="grid">
	                  <div class="row dt-rt">
	                  <div class="col-sm-6">
	                  </div>
	                  <div class="col-sm-6">
	                  </div>
	           </div>
	           <table style="height:614px;cursor:pointer;text-align:center" class="table table-striped table-bordered table-hover  dataTable-helper dataTable" data-provide="datatable" id="DataTables_Table_0" >
                    <thead>
                        <th style="text-align:center">排 名</th>
                        <th style="text-align:center">城市名称</th>
                        <th style="text-align:center">本月月薪（元）</th>
                        <th style="text-align:center">上月月薪（元）</th>
                        <th style="text-align:center">增 幅</th>
                    </thead>
                                    
                    <tbody id="salaryTable" role="alert" aria-live="polite" aria-relevant="all">                                                           
                        
                    </tbody>
                    </table>
                    <div class="row dt-rb">
                    <div class="col-sm-6">
                    </div>
                    <div class="col-sm-6">
                    </div></div></div>
	         
	      </div>
	      <div class="col-md-4">
	          <h4 id="salary" class="heading" style="text-align:center">职位需求增长最快的主要城市</h4>
	           <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper" role="grid">
	                  <div class="row dt-rt">
	                  <div class="col-sm-6">
	                  </div>
	                  <div class="col-sm-6">
	                  </div>
	           </div>
	           <table style="height:614px;cursor:pointer;text-align:center" class="table table-striped table-bordered table-hover  dataTable-helper dataTable" data-provide="datatable" id="DataTables_Table_0" >
                    <thead>
                        <th style="text-align:center">排 名</th>
                        <th style="text-align:center">城市名称</th>
                        <th style="text-align:center">本月发帖量</th>
                        <th style="text-align:center">上月发帖量</th>
                        <th style="text-align:center">增 幅</th>
                    </thead>
                                    
                    <tbody id="salaryTable" role="alert" aria-live="polite" aria-relevant="all">                                                           
                               
                    </tbody>
                    </table>
                    <div class="row dt-rb">
                    <div class="col-sm-6">
                    </div>
                    <div class="col-sm-6">
                    </div></div></div>
	         
	      </div>
      </div>
      
   </div>
   
   
   
<script>


//月度排行榜的年份选择
var month_year = "";
//季度排行榜的年份选择
var season_year = "";

//默认点击榜单的按钮id
var clickId = '$!clickId';

 $(function(){
	   var positionValue = $("#position_select").get(0).value;
	   if(positionValue==""){
		   return ;
	   }
	   $("#position").combobox('select',positionValue); 
	   
});


//时间范围设置
var begin_date = $("#begin_date").get(0).value;
var end_date = $("#end_date").get(0).value;
var date_begin = begin_date.split("-"); 
var date_end = end_date.split("-");

 $(".dropdown-toggle").mouseover(function(e){
	 var event = window.event||e; 
    event.cancelBubble = true;
	if(this.id==clickId){
		$(this).next().show();
		return;
	}
	$(this).removeClass("btn-default");
	$(this).addClass("btn-info");
});
$(".dropdown-toggle").mouseout(function(e){
	var event = window.event||e; 
	event.cancelBubble = true;
	if(this.id==clickId){
		return;
	}
	$(this).removeClass("btn-info");
	$(this).addClass("btn-default");
}); 

$(".dropdown-toggle").click(function(e){
	//取消冒泡事件
	var event = window.event||e; 
	event.cancelBubble = true;
	if(this.id==clickId){
		$(this).next().show();
		return;
	}
	$(".dropdown-menu").hide();
	if(this.id=='month'){
		$(this).text(date_end[0]+"年"+date_end[1]+"月");
		$("#season").text("季度榜单");
		$("#year").text("年度榜单");
	} else if(this.id=='season'){
		var season = "";
		if(parseInt(date_end[1])<=3){
			season = "第一季度";
		}else if(parseInt(date_end[1])<=6){
			season = "第二季度";
		}else if(parseInt(date_end[1])<=9){
			season = "第三季度";
		}else{
			season = "第四季度";
		}
		$(this).text(date_end[0]+"年"+season);
		$("#month").text("月度榜单");
		$("#year").text("年度榜单");
	}else{
		var year = $(this).next().children().eq(0).text();
		$(this).text(year);
		$("#season").text("季度榜单");
		$("#month").text("月度榜单");
	} 
	//移掉之前选择的样式
	$("#"+clickId).removeClass("btn-info");
	$("#"+clickId).addClass("btn-default");
	//为当前选择的添加样式
	$(this).removeClass("btn-default");
	$(this).addClass("btn-info");
	clickId = this.id;
	$(this).next().show();
	
});
 
 $(".input-group").parent().mouseleave(function(e){
	//取消冒泡事件
    var event = window.event||e; 
	event.cancelBubble = true;
  // if(typeof(e.target.name)=='undefined'||e.target.name==""||e.target.name=="undefined"){
	   $(".dropdown-menu").hide();
   //}
}); 
  
 $(".dropdown-menu li").click(function(e){
	  var event = window.event||e; 
	  event.cancelBubble = true;
	  if($(this).parent().get(0).id=='month_ul_more'){
		  $("#month").text(month_year+$(this).text());
		  $(this).parent().hide();
	  }else if($(this).parent().get(0).id=='season_ul_more'){
		  $("#season").text(season_year+$(this).text());
		  $(this).parent().hide();
	  }else if($(this).parent().get(0).id=='year_ul'){
		  $("#year").text($(this).text());
		  $(this).parent().hide();
	  }

 }); 
 
  $(".dropdown-menu li").mouseover(function(e){
	  var event = window.event||e; 
	 event.cancelBubble = true;
	 var top = $(this).offset().top-154;
	 //alert(top);
	 if($(this).parent().get(0).id=='month_ul'){ 
		 if(this.id=='month_first'){
			 setMonth(parseInt(date_begin[1])-1,11);
		 }else if(this.id=='month_last'){
			 setMonth(0,parseInt(date_end[1])-1);
		 }else{
			 setMonth(0,11);
		 }
		 month_year = $(this).text();
		 $("#month_ul_more").css('top',top);
 	     $("#month_ul_more").show();
 	     return;
	     }else if($(this).parent().get(0).id=='season_ul'){
	    	if(this.id=='season_first'){
	    		setSeason(parseInt(date_begin[1])-1,11);
   		 }else if(this.id=='season_last'){
   			setSeason(0,parseInt(date_end[1])-1);
   		 }else{
   			setSeason(0,11);
   		 }
	    	season_year = $(this).text();
	    	$("#season_ul_more").css('top',top);
	    	$("#season_ul_more").show();
	     }
	
});  
 
 
//设置季度下的月份
 function setMonth(begin,end){
	 for(i=0;i<12;i++){
			 if(i>=begin&&i<=end){    				 
			    $("#month_ul_more").children().eq(i).show();
			 }else{
				$("#month_ul_more").children().eq(i).hide();
			 }
		 }
 }

//设置季度
 function setSeason(begin,end){
	 $("#season_ul_more").children().hide();
	 for(i=0;i<12&&begin<=end;i++){
		 if(begin<3){
			 $("#season_ul_more").children().eq(0).show();
		 }else if(begin<6){
			 $("#season_ul_more").children().eq(1).show();
		 }else if(begin<9){
			 $("#season_ul_more").children().eq(2).show();
		 }else {
			 $("#season_ul_more").children().eq(3).show();
		 }
			 begin = begin+3;
		 }
 } 

 function doSubmit(){
	 var position = $("#position").next().children().eq(1).val();
	 var year = $("#year").text();
	 var season = $("#season").text();
	 var month = $("#month").text();
	 window.location.href = "$!{__beat.server.contextPath}/zhishu/zhaopin/city?position="+position+"&year="+year+"&season="+season+"&month="+month+"&clickId="+clickId;
 }
 
 
 $("body").click(function(e){
	 
	 if(e.target.name!="BUTTON"){
		 $(".dropdown-menu").hide();
	 }
 });
       	   
</script>
   
    
</body>
</html>